<template>
  <div>
    页面练习
    <div>
      全局修改数据
      {{ $store.state.message }}
      <button @click="changefn">全局：同步修改数据</button>
      <button @click="changefnsync">全局：异步修改数据</button>
      <p>getters属性：姓名:{{ $store.getters.name }}
        余额 :{{ $store.getters.money }}
      </p>
    </div>
    <div>
      局部修改数据
      {{ $store.state.user.message }}
      <button @click="changefnj">局部：同步修改数据</button>
      <button @click="changefnsyncj">局部：异步修改数据</button>
      <p>getters属性：姓名:{{ $store.getters.uname }}
        余额 :{{ $store.getters.usermoney }}
        <button @click="changefnn"> 修改姓名</button>
      </p>

    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  methods: {
    // 同步修改数据
    // changefn() {
    //   this.$store.commit('changemes')
    // },
    changefn() {
      this.$store.commit('changemes', Date.now())
    },
    changefnsync() {
      this.$store.dispatch('changemesSync')
    },
    changefnj() {
      this.$store.commit('user/changemessage')
    },
    changefnsyncj() {
      this.$store.dispatch('user/changemessageSync')
    },
    // 辅助函数的写法
    ...mapMutations('user', {
      'changefnuname': 'changeuname'
    }),
    changefnn() {
      this.changefnuname(Date.now())
    }
  }
}

</script>

<style>

</style>
